﻿@model Model.Classes.SearchModel
@using FlickrNet;

@{
    ViewBag.Title = "Search";
}

<h2>Search</h2>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>SearchModel</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.Tags)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Tags)
            @Html.ValidationMessageFor(model => model.Tags)
        </div>

            <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
        var map;
        var markersArray = [];

        function initialize() {
            var haightAshbury = new google.maps.LatLng(40.7699298, -70.4469157);
            var mapOptions = {
                zoom: 6,
                center: haightAshbury,
                mapTypeId: google.maps.MapTypeId.TERRAIN
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

            google.maps.event.addListener(map, 'click', function (event) {
                clearOverlays();
                $("#Latitude").attr("value",(event.latLng.lat()));
                $("#Longtitude").attr("value", (event.latLng.lng()));
                addMarker(event.latLng);
            });
        }

        function addMarker(location) {
            marker = new google.maps.Marker({
                position: location,
                map: map
            });
            markersArray.push(marker);
        }

        // Removes the overlays from the map, but keeps them in the array
        function clearOverlays() {
            if (markersArray) {
                for (i in markersArray) {
                    markersArray[i].setMap(null);
                }
            }
        }

        // Shows any overlays currently in the array
        function showOverlays() {
            if (markersArray) {
                for (i in markersArray) {
                    markersArray[i].setMap(map);
                }
            }
        }

        // Deletes all markers in the array by removing references to them
        function deleteOverlays() {
            if (markersArray) {
                for (i in markersArray) {
                    markersArray[i].setMap(null);
                }
                markersArray.length = 0;
            }
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
 

    <div id="map_canvas"></div>

    <div>
        @Html.EditorFor(model => model.UseGeo) Use Geo
        Latitude: @Html.EditorFor(model => model.Latitude) &nbsp;
        Longtitude: @Html.EditorFor(model => model.Longtitude)
    </div>


        <div>
            <script type="text/javascript">
                $(function () {
                    $("#MinDateTaken").datepicker();
                    $("#MaxDateTaken").datepicker();
                });
            </script>
            @Html.EditorFor(model => model.UseDate) Use Date&nbsp;
            From: @Html.EditorFor(model => model.MinDateTaken)
            To: @Html.EditorFor(model => model.MaxDateTaken)

        </div>

        <div>
             @Html.EditorFor(model => model.UseRotation) Use Rotation&nbsp;
             Angle: @Html.EditorFor(model => model.Rotation)
        </div>

        <div>
              @Html.EditorFor(model => model.UseDescription) Use Description&nbsp;
             Description: @Html.EditorFor(model => model.Description)
        </div>


        <p>
            <input type="submit" value="Search" />
        </p>
    </fieldset>
}

@if (Model.PhotoCollections != null)
{
    Model.PhotoCollections = Model.PhotoCollections.Take(200).ToList();
    foreach(Model.Classes.Photo photo in Model.PhotoCollections)
    {
        <div class="photo">
        <a href="/Home/Photo/@photo.FlickrPhotoId"><img src="@photo.ThumbnailUrl"/></a>
        <p>Rank: @photo.Rank</p>
        <p>Normalized Distance: @photo.Distance</p>
        <p>Long  @photo.Longtitude Lat: @photo.Latitude</p>
        <p>Tags:  @photo.Tags</p>
        </div>
    
    }
    <div class="clear-both"></div>
}
